<template>
    <div style="display: flex;overflow-y: auto;">
        <!-- 右键菜单 -->
        <v-contextmenu ref="contextmenu1" :theme="theme">
            <v-contextmenu-item>菜单1</v-contextmenu-item>
            <v-contextmenu-item>菜单2</v-contextmenu-item>
            <v-contextmenu-item>菜单3</v-contextmenu-item>
        </v-contextmenu>

        <template v-for="(tag,index) in menuTagsList">
            <template v-if='index==0'>
                <span style="float:left" @click="pickTag(tag)"  disable-transitions v-contextmenu:contextmenu1 >
                    <el-tag size="small" class="menuTagItem" :class="menuCurKey==tag.key?'menuTagItemCur':''" style="padding: 0 10px;"  >
                        {{tag.name}}
                    </el-tag>
                </span>
            </template>
            <template v-else>
                <span style="float:left" @click="pickTag(tag)"  v-contextmenu:contextmenu1 >
                    <el-tag :key='tag.key' size="small" class="menuTagItem" :class="menuCurKey==tag.key?'menuTagItemCur':''" closable @close='closeTag(tag.key)'
                        disable-transitions>
                        {{tag.name}}
                    </el-tag>
                </span>
            </template>
        </template>

        

    </div>
</template>

<script>
    export default {
        name: 'MenuTags',
        props: {
            theme: String,
        },
        data() {
            return {
                tags: [Array]
            }
        },
        created() {

        },
        methods: {
            closeTag(key) {
                this.$store.commit('menutags/closeTag', key);
                this.$router.push({ path: this.$store.state.menutags.curTag.key });                
            },
            openTagMenu(key) {
                console.log(key);
            },
            pickTag(tag) {
                this.$store.commit('menutags/pickTag', tag);
                this.$router.push({ path: tag.key });
            }
        },
        computed: {
            menuTagsList() {
                return this.$store.state.menutags.menutagList;
            },
            menuCurKey(){
                return this.$store.state.menutags.curTag.key;
            }
        }
    };
</script>

<style scoped>
    .menuTagItem {
        margin-right: 5px;
        cursor: pointer;
    }

    .menuTagItem:hover {
        /* box-shadow: 0px 0px 2px 2px #E0E0E0; */
        color: white;
        background: #42A5F5;
    }

    .menuTagItemCur {
        /* box-shadow: 0px 0px 2px 2px #E0E0E0; */
        color: white;
        background: #42A5F5;
    }

    .box {
        width: 100%;
    }
</style>